<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 父子组件传值</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <counter :count="0" @change="numChange"></counter>
    <counter :count="0" @change="numChange"></counter>
    <div>{{total}}</div>
</div>
<script>
    // 单击求和
   let counter={
       props:['count'],
       data:function(){
           return {
               number:this.count
           }
       },
       template:'<div @click="handelClick">{{number}}</div>',
       methods:{
           handelClick:function () {
                this.number++;
                this.$emit("change",1)
           }
       }
    };
    let vm = new Vue({
        el: '#app',
        data:{
            total:0
        },
        components:{
            counter:counter
        },
        methods: {
            numChange:function (step) {
                this.total+=step;
            }
        }
    });
</script>
</body>
</html>